<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#00aaff" status-bar left-icon="left" title="账簿绑卡" @clickLeft="back"/>
		<view class="header">
			<uni-card isFull thumbnail="/static/images/money.png" :title="account_info.account_name" :extra="account_info.account_no">
				<button type="primary" @click="toAdd">新增账户银行卡</button>
			</uni-card>
		</view>
		<view class="body">
			<uni-list>
				<uni-list-item v-for="(item, index) in card_list" :key="index">
					<template v-slot:body>
						<view class="slot-body-box">
							<view class="bank-name">
								<image class="slot-image" src="/static/images/bank_card.png" mode="widthFix" />
								<text> {{getHiddenCardNo(item.primary_account)}} </text>
							</view>
							<view class="card-no">开户行名：{{item.bank_name}}</view>
							<view class="card-no">开户行号： {{item.bank_no}}</view>
							<view class="created-at">创建时间：{{item.created_at}}</view>
						</view>
					</template>
					<template v-slot:footer>
						<view class="slot-footer-box">
							<view class="default-s" v-if="item.is_default">默认卡</view>
							<template v-else>
								<view class="default-a" @click="setCardDefault(item.primary_account)">设为默认</view>
								<view class="delete-a" @click="delCardInfo(item.primary_account, item.id)">取消绑定</view>
							</template>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account_info: "",
				card_list: []
			}
		},
		
		onShow() {
			let uid = uni.getStorageSync('uid');
			
			if(!uid || uid == "") {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			} else {
				this.getBankCardList(uid)
			}
		},
		
		methods: {
			back() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			
			getBankCardList( uid ) {
				uni.showLoading({
					title:'请求中...'
				})
				
				uni.request({
					url: '/card/getBankCardList',
					data: {
						uid
					},
					success: (res) => {
						if(res.data.success) {
							this.card_list = res.data.data.card_list;
							this.account_info = res.data.data.account_info;
						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.errMessage
							})
						}
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			
			getHiddenCardNo( card_no ) {
				return card_no.substring(0, 8) + '*****' + card_no.substr(-6);
			},
			
			toAdd() {
				uni.navigateTo({
					url: '/pages/bankCard/add'
				})
			},
			
			setCardDefault(card_no) {
				uni.showLoading({
					title:'请求中...'
				})
				
				uni.request({
					url: '/card/setCardDefault',
					data: {
						account_id: this.account_info.id,
						account_no: this.account_info.account_no,
						primary_account: card_no
					},
					method:'POST',
					success: (res) => {
						if(res.data.success) {
							this.card_list = res.data.data.card_list;
							uni.showToast({
								icon: 'success',
								title: '操作成功'
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.errMessage
							})
						}
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			
			delCardInfo(card_no, card_id) {
				uni.showLoading({
					title:'请求中...'
				})
				
				uni.request({
					url: '/card/delCardInfo',
					data: {
						account_id: this.account_info.id,
						account_no: this.account_info.account_no,
						primary_account: card_no,
						card_id
					},
					method:'POST',
					success: (res) => {
						if(res.data.success) {
							this.card_list = res.data.data.card_list;
							uni.showToast({
								icon: 'success',
								title: '操作成功'
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.errMessage
							})
						}
					},
					complete: () => {
						uni.hideLoading()
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		
	}
	
	.body {
		margin-top: 20rpx;
		padding-bottom:60rpx;
	}
	
	.slot-image {
		width: 60rpx;
		height: 60rpx;
	}
	
	.slot-body-box {
		width: 550rpx;
		height: 180rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		
		.bank-name {
			display: flex;
			align-items: center;
			
			text {
				color: $uni-base-color;
				font-size: 30rpx;
				margin-left: 20rpx;
			}
		}
		
		.card-no {
			font-size: 26rpx;
			color: $uni-extra-color;
		}
		
		.created-at {
			font-size: 26rpx;
			color: $uni-extra-color;
		}
	}
	
	.slot-footer-box {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 120rpx;
		
		.default-a {
			color: #2196F3;;
			font-size: 26rpx;
			text-decoration: underline;
		}
		
		.delete-a {
			color: #F44336;
			font-size: 26rpx;
			text-decoration: underline;
		}
		
		.default-s {
			color: #43A047;
			font-size: 26rpx;
		}
	}
	
	/deep/ .uni-list-item__container {
		justify-content: space-between;
	}
</style>